<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">订单</span>
    <mat-button-toggle-group [value]="filterEx"
                             (change)="exGroupChanged($event)">
      <mat-button-toggle value="all">全部</mat-button-toggle>
      <mat-button-toggle [value]="ex.code" *ngFor="let ex of $exchs | async">
        {{ex.name}}
      </mat-button-toggle>
    </mat-button-toggle-group>
    <span class="spacer"></span>
    <button class="flex-button" mat-stroked-button color="primary" (click)="syncOrders()"
            [disabled]="processes.syncOrders">
      <mat-icon>sync</mat-icon>
      同步
    </button>

    <button mat-button [matMenuTriggerFor]="syncActions">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #syncActions="matMenu">
      <button mat-menu-item (click)="syncOrdersFor(exch.code)" [disabled]="processes['syncOrders-'+exch.code]"
              *ngFor="let exch of $exchs | async">
        <mat-icon>sync</mat-icon>
        同步（{{exch.name}}）
      </button>
    </mat-menu>
  </mat-toolbar>

  <div class="table-filter-form">

    <div>
      <span class="field-label subordinated">基础币种</span>
      <button mat-button [color]="filterForm['baseCcy']===ccy? 'accent':null" *ngFor="let ccy of $ccyCodes | async"
              (click)="baseCcySelected(ccy)">
        <img class="ccy-logo" [src]="CoinLogoPath(ccy)" alt="">
        {{ccy}}
      </button>
    </div>

    <div class="operation-bar">

      <mat-form-field>
        <input matInput placeholder="基础币种" name="baseCcy" [(ngModel)]="filterForm['baseCcy']"
               (keyup.enter)="filter()">
      </mat-form-field>

      <mat-form-field>
        <input matInput placeholder="报价币种" name="quoteCcy" [(ngModel)]="filterForm['quoteCcy']"
               [matAutocomplete]="quoteCcyAuto" (keyup.enter)="filter()">
        <mat-autocomplete #quoteCcyAuto="matAutocomplete">
          <mat-option *ngFor="let option of quoteCcyOptions" [value]="option">
          <span class="ccy-logo-code">
            <img class="ccy-logo" [src]="CoinLogoPath(option)" alt="">
            <span class="ccy-code">{{option}}</span>
          </span>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <mat-form-field>
        <input matInput [matDatepicker]="dateToPicker" placeholder="截止日期" [max]="today"
               [(ngModel)]="filterForm['createTsTo']" (dblclick)="filterForm['createTsTo']=undefined">
        <mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
        <mat-datepicker #dateToPicker></mat-datepicker>
      </mat-form-field>

      <button mat-button (click)="filter()">
        <mat-icon>search</mat-icon>
        筛选
      </button>
      <button mat-button (click)="resetFilter()">
        <mat-icon>block</mat-icon>
        全部
      </button>
    </div>
  </div>

  <table mat-table class="full-width" matSort matSortActive="createTs" matSortDirection="desc">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1 + (paginator ? paginator.pageIndex * paginator.pageSize : 0)}}
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易所</th>
      <td mat-cell *matCellDef="let row">{{row.ex}}</td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基础币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
        <div class="ccy-code">{{row.baseCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="pairSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易对</th>
      <td mat-cell *matCellDef="let row">{{row.pairSymbol}}</td>
    </ng-container>

    <ng-container matColumnDef="orderId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>订单号</th>
      <td mat-cell *matCellDef="let row">
        <span [matTooltip]="row.orderId">{{row.orderId | truncate: 8 }}</span>
        <!--
        <ng-template [ngIf]="row.clientOrderId">
          <br>
          <span [matTooltip]="row.clientOrderId">{{row.clientOrderId | truncate: 8 }}</span>
        </ng-template>-->
      </td>
    </ng-container>

    <ng-container matColumnDef="side">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>方向</th>
      <td mat-cell *matCellDef="let row"
          [class.order-side-buy]="row.side==='buy'"
          [class.order-side-sell]="row.side==='sell'">
        {{row.side}}
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>类型</th>
      <td mat-cell *matCellDef="let row">{{row.type}}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>状态</th>
      <td mat-cell *matCellDef="let row"
          [class.order-status-canceled]="row.status==='canceled'">
        {{row.status}}
      </td>
    </ng-container>

    <ng-container matColumnDef="avgPrice">
      <th mat-header-cell *matHeaderCellDef>执行均价</th>
      <td mat-cell *matCellDef="let row">
        {{row.avgPrice | money}}
      </td>
    </ng-container>

    <ng-container matColumnDef="execQty">
      <th mat-header-cell *matHeaderCellDef>基础币种数量</th>
      <td mat-cell *matCellDef="let row">
        {{row.execQty | money}}
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteAmount">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种数量</th>
      <td mat-cell *matCellDef="let row">
        {{row.quoteAmount | money}}
      </td>
    </ng-container>

    <ng-container matColumnDef="createTs">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>创建时间</th>
      <td mat-cell *matCellDef="let row">
        <!--{{row.updateTs | date:'MM-dd HH:mm:ss'}} <br>-->
        {{row.createTs | date:'MM-dd HH:mm:ss'}}
      </td>
    </ng-container>

    <ng-container matColumnDef="createdAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>初次同步</th>
      <td mat-cell *matCellDef="let row">{{row.createdAt | date:'y-MM-dd'}}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">
        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #actions="matMenu">
          <button mat-menu-item (click)="showOrderDetail(row)">
            <mat-icon>details</mat-icon>
            详情
          </button>
          <button mat-menu-item (click)="openOrderForm(row)">
            <mat-icon>shopping_cart</mat-icon>
            新订单
          </button>
          <button mat-menu-item (click)="remove(row)">
            <mat-icon>remove_circle_outline</mat-icon>
            删除
          </button>
        </mat-menu>

      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator #paginator
                 [length]="dataSource?.total"
                 [pageIndex]="0"
                 [pageSize]="20"
                 [pageSizeOptions]="[10, 20, 50, 100]">
  </mat-paginator>

</div>

<p>&nbsp;</p>
